<template>
  <div class="basic_info">
    <div class="info_operation_btn">
      <div class="btn_left">
        <el-button
          @click="onJrybButton(index)"
          v-for="(item, index) in jrybButton"
          :key="index"
          :type="item.state ? 'primary' : ''"
          >{{ item.name }}</el-button
        >
      </div>
      <div class="btn_right">
        <el-button @click="onRefresh">刷新</el-button>
        <el-button type="primary" @click="onClose">关闭</el-button>
      </div>
    </div>
    <div class="info_content_div">
      <div class="div_table">
        <div class="table_content">
          <el-table
            ref="tableRef"
            show-summary
            :summary-method="getSummaries"
            highlight-current-row
            :header-cell-style="{
              color: '#666666',
              textAlign: 'center',
              height: '30px',
              borderColor: '#dddddd',
              background: '#EDEDED',
            }"
            :cell-style="{ textAlign: 'center' }"
            :data="tableData"
            height="100%"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            @row-click="onClickTable"
          >
            <el-table-column :resizable="false" label="序号" type="index" width="50"></el-table-column>
            <template v-for="(item, index) in tableColumnData">
              <el-table-column 
              :show-overflow-tooltip="true"
              :label="item.zidingyiName ? item.zidingyiName : item.morenName" 
              :prop="item.props" 
              v-if="item.zidingyiState && item.props === 'operate'"
              min-width="120px"
              width="170px">
                <template slot-scope="scope">
                  <div class="text_div">
                    <p>
                      <span @click="toDetail(scope.row)">详情</span>
                    </p>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                :label="item.zidingyiName ? item.zidingyiName : item.morenName"
                v-else-if="item.zidingyiState  && item.props === 'warningStatusName'"
                :prop="item.props"
                min-width="120px"
                width="170px"
              >
                <template slot-scope="scope">
                  <div class="text_div">
                    <span :class="classColor(scope.row)">{{scope.row.warningStatusName}}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                :label="item.zidingyiName ? item.zidingyiName : item.morenName"
                v-else-if="item.zidingyiState  && (item.props === 'receivableBeyond' || item.props === 'payableBeyond')"
                :prop="item.props"
                min-width="120px"
                width="170px"
              >
                <template slot-scope="scope">
                  <div class="text_div">
                    <span :class="classBeyond(scope.row, item.props)">{{ scope.row[item.props] }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                :key="index"
                :label="item.zidingyiName ? item.zidingyiName : item.morenName"
                v-else-if="item.zidingyiState"
                :prop="item.props"
                min-width="120px"
                :width="item.width ? item.width : '170px'"
              >
              </el-table-column>
            </template>
          </el-table>
        </div>
        <div class="table_pagination">
          <div class="pagination_div">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryData.pageNo"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="queryData.pageSize"
              layout="jumper, prev, pager,next, sizes"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getAction } from '@/api/manage'
import { toBillDetail } from '@/utils/billUtil'
// 导入调用处理权限数据方法
import { handlePermissions,handleOtherPerms, formatMoney, formatPrice, formatNumber, delcommafy } from '@/utils/index'
export default {
  name: 'earlyWarning',
  inject: ['closeCurrent'],
  computed: {
    ...mapGetters(['name']),
  },
  created() {
    const data = this.$route.params.state
    if (data) {
      this.stateName = data
    } else {
      this.stateName = '库存预警'
    }
    this.onButton()
    this.getData()
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.tableRef.doLayout()
    })
  },
  watch: {
    // 路由变化时，更新数据
    $route: {
      immediate: true,
      handler(val) {
        if (val.name === 'home-earlyWarning') {
          const data = this.$route.params.state
          if (data && data != this.stateName) {
            this.stateName = data
            this.onButton()
            this.getData()
          }
        }
      }
    },
  },
  data() {
    return {
      // 销售统计按钮切换
      jrybButton: [
        {
          name: '库存预警',
          state: true,
          // 库存预警列配置数据
          columnData: [
            {
              morenName: '商品名称',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: false,
              props: 'goodsName',
            },
            {
              morenName: '商品上限',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: false,
              props: 'upperLimit',
            },
            {
              morenName: '商品下限',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: false,
              props: 'lowerLimit',
            },
            {
              morenName: '当前库存',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: false,
              props: 'opNumber',
            },
            {
              morenName: '仓库',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: false,
              props: 'storehouseName',
            },
            {
              morenName: '预警状态',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: false,
              props: 'warningStatusName',
            },
            {
              morenName: '备注',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: false,
              props: 'operate',
            },
          ],
        },
        {
          name: '信用预警',
          state: false,
          // 信用预警列配置数据
          columnData: [
            {
              morenName: '往来单位',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: false,
              props: 'companyName',
            },
            {
              morenName: '往来单位类别',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: false,
              props: 'xghCompanyTypeId_dictText',
            },
            {
              morenName: '应收信用额',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: false,
              props: 'receivableQuota',
            },
            {
              morenName: '应收款余额',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: false,
              props: 'totalReceivable',
            },
            {
              morenName: '应收超限余额',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: false,
              props: 'receivableBeyond',
            },
            {
              morenName: '应付信用额',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: false,
              props: 'payableQuota',
            },
            {
              morenName: '应付款余额',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: false,
              props: 'totalPayable',
            },
            {
              morenName: '应付超限余额',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: false,
              props: 'payableBeyond',
            },
            {
              morenName: '操作',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: false,
              props: 'operate',
            },
          ],
        },
        {
          name: '其他预警',
          state: false,
          // 其他预警列配置数据
          columnData: [
            {
              morenName: '报警类型',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: false,
              width: '360px',
              props: 'warningTypeCn',
            },
            {
              morenName: '报警内容',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: false,
              width: 'calc(100% - 360px)',
              props: 'waringContext',
            },
            {
              morenName: '操作',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: false,
              props: 'operate',
            },
          ],
        },
      ],
      // 表格数据
      tableData: [],
      batchData: [], // 存储多选的数据
      // 查询条件数据
      queryData: {
        pageSize: 20, //每页的数据条数
        pageNo: 1, //默认开始页面
      },
      stateName: '', // 选中按钮名称
      tableColumnData: [], // 表格列数据列表数据展示元素
      total: 0, // 总数
    }
  },
  methods: {
    // 详情
    toDetail(item) {
      let name = 'baseInfomation-material-transactionCompanyInfo'
      if (this.stateName === '库存预警') {
        name = 'baseInfomation-material-commodityInfo'
      } else if (this.stateName === '其他预警') {
        return toBillDetail(this, item.orderTypeId, item.id)
      }
      this.$router.push({
        name,
        params: {
          data: item
        },
      })
    },
    // 获取数据
    getData() {
      let data = { ...this.queryData }
      if (this.stateName === '库存预警') {
        getAction('/home/home/warning/getStorehouseWarningByPage', data).then((res) => {
          if (res.code === 200) {
            this.total = res.result.total
            let data = res.result.records || []
            data.forEach(element => {
              // 避免查询不到库存商品数据
              if(element.storehouseId === '总库存预警') {
                element.storehouseId = ''
              }
            });
            this.tableData = data
          }
        })
      } else if (this.stateName === '信用预警') {
        // 信用预警
        getAction('/home/home/warning/getCreditByPage', data).then((res) => {
          if (res.code === 200) {
            this.total = res.result.total
            const data = res.result.records || []
            data.forEach(item => {
              // 转换金额显示样式
              item.payableBeyond = item.payableBeyond ? formatMoney(item.payableBeyond) : item.payableBeyond
              item.payableQuota = item.payableQuota ? formatMoney(item.payableQuota) : item.payableQuota
              item.receivableBeyond = item.receivableBeyond ? formatMoney(item.receivableBeyond) : item.receivableBeyond
              item.receivableQuota = item.receivableQuota ? formatMoney(item.receivableQuota) : item.receivableQuota
              item.totalPayable = item.totalPayable ? formatMoney(item.totalPayable) : item.totalPayable
              item.totalReceivable = item.totalReceivable ? formatMoney(item.totalReceivable) : item.totalReceivable
            })
            this.tableData = data
          }
        })
      } else {
        getAction('/home/home/warning/getOtherWarningByPage', data).then((res) => {
          if (res.code === 200) {
            this.total = res.result.total
            this.tableData = res.result.records || []
          }
        })
      }
    },
    // 按钮状态
    onButton() {
      this.jrybButton.forEach((item) => {
        if (this.stateName == item.name) {
          item.state = true
          this.tableColumnData = item.columnData
        } else {
          item.state = false
        }
      })
      this.queryData.pageNo = 1
      this.queryData.pageSize = 20
      this.tableData = []
    },
    // 点击修改价格管理表样式
    onClickTable(row) {
      this.$refs.tableRef.toggleRowSelection(row)
    },
    // 点击切换销售统计按钮
    onJrybButton(index) {
      this.stateName = this.jrybButton[index].name
      this.onButton()
      this.getData()
    },
    // 刷新
    onRefresh() {
      this.queryData =  this.$options.data().queryData
      this.getData()
    },
    // 关闭
    onClose() {
      this.closeCurrent()
    },
    // 触发表格多选按钮
    handleSelectionChange(val) {
      this.batchData = val
    },
    // 合计列计算
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 1) {
          sums[index] = '共' + this.total + '条明细'
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    // 获取每页几条数据
    handleSizeChange(val) {
      this.queryData.pageSize = val
      this.getData()
    },
    // 获取当前第几页
    handleCurrentChange(val) {
      this.queryData.pageNo = val
      this.getData()
    },
    // 库存预警状态
    classColor(item) {
      if (item.warningStatusCode === '1') {
        return 'lowerColor'
      }
      return 'upperColor'
    },
    // 信用预警状态
    classBeyond(item, type) {
      if (type === 'receivableBeyond') {
        if (delcommafy(item.receivableBeyond) > 0) {
          return 'colorBeyond'
        }
      } else {
        if (delcommafy(item.payableBeyond) > 0) {
          return 'colorBeyond'
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.basic_info {
  width: 100%;
  height: calc(100vh - 110px);
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 8px 8px;
  display: flex;
  flex-direction: column;
}
.info_operation_btn {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  ::v-deep .el-button {
    width: 120px;
    height: 30px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 5px;
    border: none;
    margin-right: 7px;
    margin-left: 0;
    color: #666;
  }
  .el-button--primary {
    color: #fff;
  }
  .btn_left {
    width: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .el-button--primary {
      background: #fb1b1b;
    }
  }
  .btn_right {
    width: 40%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .el-button {
      width: 60px;
    }
  }
}
.info_content_div {
  width: 100%;
  height: calc(100% - 50px);
  background: #fff;
  box-sizing: border-box;
  padding: 8px 8px 0;
  display: flex;
  .div_table {
    width: 100%;
    height: 100%;
    .table_content {
      height: calc(100% - 60px);
      ::v-deep .el-table {
        border: 1px solid #e3e3e3;
        box-sizing: border-box;
        th,
        td {
          padding: 0;
          color: #666;
          box-sizing: border-box;
          border-right: 1px solid #e3e3e3;
          &:last-child {
            border-right: none;
          }
        }
        .el-table-column--selection {
          .cell {
            padding: 0;
            text-align: center;
          }
        }
        .cell {
          line-height: 30px;
          font-size: 12px;
        }
        .text_div {
          display: flex;
          justify-content: center;
          align-items: center;
          > p {
            margin: 0;
            > span {
              cursor: pointer;
              color: #1b94fb;
            }
          }
        }
        // th选择框颜色修改
        .el-checkbox {
          .is-indeterminate {
            .el-checkbox__inner {
              color: #1b93f9;
              background-color: #1b93f9;
              border-color: #1b93f9;
            }
          }
        }
        // td选择框颜色修改
        .is-checked {
          .el-checkbox__inner {
            color: #1b93f9;
            background-color: #1b93f9;
            border-color: #1b93f9;
          }
        }
        .el-table__body tr:hover > td {
          background: #e3f6ff;
        }
        .el-table__footer-wrapper {
          td {
            background: #f4f4f4;
            border: none;
          }
        }
        //滚动条的宽度
        ::-webkit-scrollbar {
          width: 8px;
          height: 10px;
          background-color: #e5e5e5;
        }
        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #c9c9c9;
        }
      }
    }
    .table_pagination {
      width: 100%;
      height: 60px;
      box-sizing: border-box;
      padding: 8px 0;
      display: flex;
      .pagination_div {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        ::v-deep .el-pagination {
          padding: 0;
          height: 30px;
          .el-pagination__sizes {
            margin: 0;
            .el-input {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}

.lowerColor {
  color: #fb1d1d;
}
.upperColor {
  color: #fd6c21;
}
.colorBeyond{
  color:#fb1f1f;
}
</style>